import { useState } from "react";
import className from "classname";
import "./learn/css/5.css";
// className={`nav-li ${index == 0 ? "active" : ""}`}
function App() {
  const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  const add = () => {
    list.unshift(0);
    setList([...list]);
  };
  const sub = () => {
    list.shift(0);
    setList([...list]);
  };
  return (
    <div className="App">
      <ul>
        {list.map((item, index) => (
          <li
            key={index}
            className={className("nav-li", { active: index == 0 })}
          >
            {item}
          </li>
        ))}
      </ul>
      <button onClick={add}>add</button>
      <button onClick={sub}>sub</button>
    </div>
  );
}

export default App;
